<template>
	<div class="list" v-if="show">
		<div class="title">
			<div class="avatar">
				{{ username(message.realName).slice(0, 1) }}
			</div>
			{{ message.realName }}
			<!-- <div
				:class="[
					'tip',
					{
						success: message.approveStatus === '02',
						error: message.approveStatus === '03',
					},
				]"
				v-if="['02', '03'].includes(message.approveStatus)"
			>
				{{ message.approveStatus === "02" ? "已同意" : "已驳回" }} · {{ message.approveDate }}
			</div> -->
		</div>
		<!-- <div class="remark" v-if="['02', '03'].includes(message.approveStatus)">
			{{ message.approveOpinion }}
		</div> -->
	</div>
</template>

<script>
export default {
	name: "list",
	props: {
		message: {
			type: Object,
			default: () => ({
				id: "",
			}),
		},
	},
	data() {
		return {}
	},
	computed: {
		show() {
			const id = +this.message.id
			if (this.message.id) {
				return isNaN(id) || id > 0
			}
			return false
		},
	},
	methods: {
		username(name) {
			return name ? name.slice(0, 2) : ""
		},
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.list {
	margin-right: 10rpx;
	.title {
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		white-space: nowrap;
		background: #4954e6;
		border-radius: 25rpx;
		overflow: hidden;
		font-size: 22rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}
}
</style>
